<%@ page import="java.util.List" %>
<%@ page import="com.example.day_day_up.entity.vo.WebMaterialVO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>

  .search-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
  }

  /* 样式搜索框输入框 */
  .search-container input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 20px 5px 10px 0;
  }

  /* 样式搜索按钮 */
  .search-container button {
    padding: 6px 12px;
    background-color: darkturquoise;
    color: white;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    cursor: pointer;
  }

  /* 鼠标悬停时改变按钮背景色 */
  .search-container button:hover {
    background-color: #45a049;
  }

  .file-space {
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    padding: 20px;
    /* 将元素垂直排列 */
    border-radius: 0 0 5px 5px;
  }

  .file-header {
    height: 40px;
    display: flex;
    align-items: center;
    color: #6c6a6a;
    background-color: #f7f5f5;
    padding: 0 40px;
    margin-top: 10px;
  }

  .file-header .header-left {
    width: 60%;
  }

  .file-header .header-right {
    width: 40%;
    display: flex;
  }

  .header-right span {
    flex: 1;
  }

  .file_card {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 40px;

    .type_img {
      width: 20px;
      height: 20px;
    }
  }

  .file_card:hover {
    background: rgba(181, 207, 243, 0.2);
  }

  .card-left {
    display: flex;
    align-items: center;
    width: 60%;
  }

  .card-left a:hover {
    cursor: pointer;
    color: #3498db;
  }

  .have_read {
    margin-right: 10px;
  }

  .type_img {
    margin-right: 5px;
    vertical-align: top;
    /* 设置垂直对齐方式为顶部对齐 */
  }

  .file_name {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
  }

  .card-right {
    display: flex;
    width: 40%;
  }

  .card-right span {
    flex: 1;
  }

  input[type="checkbox"].have_read:checked {
    background-color: #007bff; /* 设置背景颜色为蓝色 */
  }

  .no-list {
    width: 100%;
    height: 100px;
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
  }

  .end-div {
    height: 60px;
    padding: 0 40px;
  }
</style>

<div class="search-container">
  <form action="/search" method="get" style="margin-right: 20px;">
    <input type="text" name="q" placeholder="请输入关键词...">
    <button type="submit" style="margin-top: 2px;">搜索</button>
  </form>
</div>
<div class="file-space">
  <div class="file-header">
    <div class="header-left">
      <span>文件名</span>
    </div>
    <div class="header-right">
      <span>创建者</span>
      <span>创建时间</span>
    </div>
  </div>
  <%
    String c_id = request.getParameter("id");
    String materialKey = "materials_key" + c_id;
    List<WebMaterialVO> materials = (List<WebMaterialVO>) session.getAttribute(materialKey);
    request.setAttribute("c_id", c_id);
    request.setAttribute("materials", materials);
  %>
  <c:forEach var="material" items="${materials}">
    <div class="file_card">
      <div class="card-left">
        <label>
          <c:choose>
            <c:when test="${material.status}">
              <input type="checkbox" checked class="have_read" disabled>
            </c:when>
            <c:otherwise>
              <input type="checkbox" class="have_read" disabled>
            </c:otherwise>
          </c:choose>
        </label>
        <c:if test="${material.type eq 1}">
          <img class="type_img" src="../assets/file_imgs/视频.png" alt="file">
          <a class="file_name" onclick="toView('${material.id}','${c_id}')">${material.name}</a>
        </c:if>
        <c:if test="${material.type eq 2}">
          <img class="type_img" src="../assets/file_imgs/图片.png" alt="file">
          <a class="file_name" onclick="toView('${material.id}','${c_id}')">${material.name}</a>
        </c:if>
        <c:if test="${material.type eq 3}">
          <img class="type_img" src="../assets/file_imgs/文档.png" alt="file">
          <a class="file_name" href=${material.storeName} download>${material.name}</a>
        </c:if>
      </div>
      <div class="card-right">
        <span>${material.creatorName}</span>
        <span>${material.createTime}</span>
      </div>
    </div>
  </c:forEach>
  <c:if test="${empty materials}">
    <div class="no-list">
      暂时空空如也
    </div>
  </c:if>
  <div class="end-div"></div>
</div>

<script>
  function toView(id, c_id) {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', '/day_day_up/material?id=' + id)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        window.location.href = '/day_day_up/material/view.jsp?id=' + id + '&c_id=' + c_id
      }
    }
    xhr.send()
  }
</script>
